<template>
	<el-main>
		<el-card shadow="never" header="消息中心">
			<scTable ref="noticeTable" :apiObj="noticeApi" stripe remoteSort remoteFilter>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="是否查看"  width="100" prop="readFlag"   column-key="readFlag" >
					<template #default="scope">
						<el-tag v-if="scope.row.readFlag ==1" type="info">已查看</el-tag>
						<el-tag v-if="scope.row.readFlag ==0" >未查看</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="标题" prop="title"   column-key="title" ></el-table-column>
				<el-table-column label="简介" prop="description"  ></el-table-column>
				<el-table-column label="时间" prop="timeStr"  ></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="100">
					<template #default="scope">
						<el-button type="primary" text size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
					</template>
				</el-table-column>
			</scTable>
		</el-card>
		<sc-dialog v-model="noticeDialog.visible" :title="noticeDialog.title"  :show-fullscreen="false" :show-close="false">
			{{ noticeDialog.content }}
			<template #footer>
				<el-button @click="noticeDialog.visible = false">取 消</el-button>
				<el-button type="primary" @click="markRead">知道了</el-button>
			</template>
		</sc-dialog>
	</el-main>

</template>

<script>
export default {
	name: "messageCenter",
	data(){
		return{
			noticeApi: this.$API.system.notice.list,
			noticeDialog:{
				noticeId:"",
				title:"",
				visible:false,
				content:""
			},
		}
	},
	methods:{
		//查看
		table_show(item){
			this.noticeDialog.noticeId = item.id
			this.noticeDialog.title = item.title
			this.noticeDialog.content = item.content
			this.noticeDialog.visible = true
		},
		//标记已读
		async markRead(){
			var noticeId = this.noticeDialog.noticeId;
			var res = await this.$API.system.notice.markRead.post(noticeId)
			if(res.success){
				this.noticeDialog.visible = false
				this.$refs.noticeTable.refresh();
			}
		},
	}
}
</script>

<style scoped>

</style>
